/*
 * @Author: tanying
 * @Date: 2024-04-17 10:58:27
 * @LastEditTime: 2024-04-25 11:47:31
 * @LastEditors: tanying
 * @FilePath: \vue-three\src\twin\CircleMenu.js
 * @Description: 
 */
import * as THREE from "three"
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
import { GUI } from 'three/examples/jsm/libs/lil-gui.module.min.js'
import Walk from "../plugins/Walk"

export default class CircleMenu {
  constructor() {
    this.scene = new THREE.Scene();

    const width = window.innerWidth; 
    const height = window.innerHeight; 
    this.camera = new THREE.PerspectiveCamera(30, width / height, 1, 3000);
    this.camera.position.set(0, 0, 200);
    this.camera.lookAt(0, 0, 0);

    const walk = new Walk(this.scene)

    const geometry = new THREE.PlaneGeometry(81.1, 100.4)
    const texture = new THREE.TextureLoader().load("./images/choose_city_bg.png");
    const material = new THREE.MeshLambertMaterial({
      // color: 0xffff00,
      map: texture,
      transparent:true,//SpriteMaterial默认是true
    })
    const mesh = new THREE.Mesh(geometry, material);
    mesh.position.y = 6.56
    mesh.position.x = -3.28
    this.scene.add(mesh);


    // let group = new THREE.Group();
    // const geometry1 = new THREE.CircleGeometry( 30, 8 );
    // const material1 = new THREE.MeshBasicMaterial( { 
    //   color: 0xffff00,
    //   wireframe:true,//查看网格的三角形结构
    // } );
    // const circle = new THREE.Mesh( geometry1, material1 );
    // group.add(circle)

    // // 顶点位置数据
    // const pos = circle.geometry.attributes.position;
    // const count = pos.count; //几何体顶点数量
    // let points = []
    // // 批量设置所有几何体顶点位置的y坐标
    // for (let i = 0; i < count; i++) {
    //   const y = pos.getY(i);
    //   const x = pos.getX(i);
    //   const z = pos.getZ(i);

    //   points.push(new THREE.Vector3(x, y, z))
    // }
    //   console.log(points) 

    //   const curve = new THREE.EllipseCurve(
    //     0,  0,            // ax, aY
    //     6.3, 6.3,           // xRadius, yRadius
    //     0,  2 * Math.PI,  // aStartAngle, aEndAngle
    //     false,            // aClockwise
    //     0                 // aRotation
    //   );
      
    //   const points2 = curve.getPoints( 50 );
    //   console.log(points2)
    //   const geometry3 = new THREE.BufferGeometry().setFromPoints( points2 );
    //   const material3 = new THREE.LineBasicMaterial( { color: 0xff0000 } );
      
      
    //   // 2. 计算每个顶点的颜色值
    //   const colorsArr = [];
    //   const c1 = new THREE.Color(0x9FFFF9);//山谷颜色
    //   const c2 = new THREE.Color(0x61BDF3);//山顶颜色
    //   const c3 = new THREE.Color(0x9FFFF9);//山顶颜色
    //   for (let i = 0; i < points2; i++) {
    //       //当前高度和整体高度比值
    //       const percent = i+1 / points2.length;
    //       if(i <= 25) {
    //         const c = c1.clone().lerp(c2, percent);//颜色插值计算
    //         colorsArr.push(c.r, c.g, c.b); 
    //       } else {
    //         const c = c2.clone().lerp(c3, percent);//颜色插值计算
    //         colorsArr.push(c.r, c.g, c.b); 
    //       }
         
    //   }

    //   // console.log(colorsArr)
    //   const colors = new Float32Array(colorsArr);
    //   // 设置几何体attributes属性的颜色color属性
    //   // mesh.geometry.attributes.color = new THREE.BufferAttribute(colors, 3);

      

    // const geometry2 = new THREE.CircleGeometry( 6.3, 32 );
    // const material2 = new THREE.MeshBasicMaterial({ 
    //   color: 0xffff00,
    //   wireframe:true,//查看网格的三角形结构
    // });
    // for (let point of points) {
    //   const circle2 = new THREE.Mesh( geometry2, material2 );
    //   circle2.position.set(point.x, point.y, point.z)
    //   // group.add(circle2)

    //   // Create the final object to add to the scene
    //   const ellipse = new THREE.Line( geometry3, material3 );
    //   ellipse.geometry.attributes.color = new THREE.BufferAttribute(colors, 3);
    //   // geometry3.attributes.color = new THREE.BufferAttribute(colors, 3);

    //   ellipse.position.set(point.x, point.y, point.z)


    //   group.add(ellipse)
    // }

    const geometry2 = new THREE.CircleGeometry( 6.3, 32 );
    const material2 = new THREE.MeshBasicMaterial({ 
      color: 0xffff00,
      wireframe:true,//查看网格的三角形结构
    });

    const R = 30; //圆弧半径
    const N = 8; //分段数量
    const sp = 2*Math.PI / N; //两个相邻点间隔弧度
    const group = new THREE.Group();
    for (let i = 0; i < N + 1; i++) {
        const angle = sp * i;
        // 以坐标原点为中心，在XOY平面上生成圆弧上的顶点数据
        const x = R * Math.cos(angle);
        const y = R * Math.sin(angle);
        
        const mesh = new THREE.Mesh(geometry2, material2); 
        mesh.position.set(x,y,0);
        group.add(mesh);
    }


    group.position.z = 1
    this.scene.add( group );


    this.renderer = new THREE.WebGLRenderer({
      antialias: true,
      logarithmicDepthBuffer: true,
    })
    this.renderer.setPixelRatio(window.devicePixelRatio);
    this.renderer.setSize(width, height); 
    document.body.appendChild(this.renderer.domElement);
    this.renderer.setAnimationLoop(() => {
      this.renderer.render(this.scene, this.camera)
      walk.mixer.update(deltaTime);
    })

    this.directionalLight = new THREE.DirectionalLight(0xffffff, 10);
    this.directionalLight.position.set(80, 100, 50);
    this.scene.add(this.directionalLight);

    this.controls = new OrbitControls(this.camera, this.renderer.domElement);
    this.controls.target.set(0, 0, 0);
    this.controls.update();

    const axesHelper = new THREE.AxesHelper(20);
    this.scene.add(axesHelper)

    window.addEventListener('resize',()=>{
      this.renderer.setSize(window.innerWidth, window.innerHeight);
      this.camera.aspect = window.innerWidth / window.innerHeight;
      this.camera.updateProjectionMatrix();
    });

    // 辅助调试
    this.gui = new GUI();
    // 平行光调试
    const dirFolder = this.gui.addFolder('动画底图位置');//创建一个子菜单
    dirFolder.add(mesh.position, 'x', -10, 10);
    dirFolder.add(mesh.position, 'y', -10, 10);
  }
}